<template>
  <el-card style="max-width: 1400px">
    <h2>采购审批</h2>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="proName" label="采购物品名称" />
      <el-table-column prop="quantity" label="采购数量" />
      <el-table-column prop="price" label="单价" />
      <el-table-column prop="review" label="高管审核状态" />
      <el-table-column prop="allocation" label="财务审核状态" />
      <el-table-column prop="delivered" label="综合购买状态" />
      <el-table-column prop="renSona" label="申请采购理由" width="150px"/>
      <el-table-column prop="renSonb" label="高管审核理由" width="150px"/>
      <el-table-column prop="renSonc" label="财务审核理由" width="150px"/>
      <el-table-column prop="renSond" label="综合部审核理由" width="150px"/>
      <el-table-column fixed="right" label="编辑"  width="170">
        <template #default="scope">
          <!-- 编辑按钮 0-->
          <el-button type="primary" @click="approval(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页模块，用于切换页面和设置每页显示数量 -->
    <el-pagination
        v-model:current-page="PageNum"
        v-model:page-size="PageSize"
        :page-sizes="[5, 8, 10, 12]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>



  <!-- 审批弹窗 -->
  <el-dialog
      v-model="approveDialogVisible"
      title="订单审批"
      width="400px"
  >
    <el-form :model="approveForm" label-width="80px">
      <el-form-item label="审批状态">
        <el-select v-model="approveForm.allocation" placeholder="请选择审批状态">
          <el-option label="已通过" value="已通过"></el-option>
          <el-option label="已拒绝" value="已拒绝"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批意见">
        <el-input
            v-model="approveForm.renSonb"
            type="textarea"
            placeholder="请输入审批意见"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="approveDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleApprove">确认审批</el-button>
    </template>
  </el-dialog>


</template>

<script lang="js" setup>
// 引入Vue的响应式和生命周期钩子
import { ref, onMounted } from 'vue'
// 引入获取库存数据的接口
import { selectPurchase,selectPurchase1,updateCg} from '@/api/puorder'
import {ElMessage} from "element-plus";


// 定义表格数据的响应式变量
const tableData = ref([])
const tableData2 = ref([])
// 定义当前页码的响应式变量
const PageNum = ref("")
// 定义每页显示数量的响应式变量
const PageSize = ref(10)
// 定义数据总数的响应式变量
const total = ref(0)

// 组件挂载后调用getList方法获取数据
onMounted(() => {
  selectPur()
})

const selectPur = async() => {
  // 调用接口获取数据
  const res = await selectPurchase(
    PageNum.value,
    PageSize.value
  )
  // 更新表格数据
  tableData.value = res.data.data.rows
 // 更新数据总数
  total.value = res.data.data.total
}


const handleSizeChange = (val) => {
  // 更新每页显示数量
  PageSize.value = val
  PageNum.value = 1
  // 重新获取数据
  selectPur()
}
const handleCurrentChange = (val) => {
  // 更新当前页码
  PageNum.value = val
  // 重新获取数据
  selectPur()
}








// 审批弹窗显示状态
const approveDialogVisible = ref(false);
// 审批表单数据
const approveForm = ref({
  allocation: '',
  renSonb: ''
});
// 选中的订单行
const currentRow = ref(null);

// 审批按钮点击事件
const approval = async (row) => {
  currentRow.value = row;
  approveDialogVisible.value = true;
};
// 处理审批提交
const handleApprove = async () => {
  if (!approveForm.value.allocation) {
    ElMessage.error('请选择审批状态');
    return;
  }
  const res = await updateCg(
      currentRow.value.id,
      approveForm.value.allocation,
      approveForm.value.renSonb
  );
  ElMessage.success(res.data.message);
  approveDialogVisible.value = false;
  await selectPur()
  // 添加条件判断
  if (res.data.message === "修改订单状态成功，已通过审核") {
    await updateOrderStatus(currentRow.value) // 替换 anotherMethod 为实际要执行的方法名
  }
  await selectPur()
};


</script>

<style scoped>
/* 设置按钮的左外边距 */
.el-button {
  margin-left: 10px;
}
</style>